<template>
  <view class="thumb-container">
    <view class="thumb-pic" @click="goToPage">
      <image :src="path" mode=""></image>
    </view>
    <view class="thumb-text">{{ name }}</view>
  </view>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'MyThumb',
  props: {
    name: {
      type: String,
      default: '占位'
    },
    index: {
      type: Number
    },
    url: {
      type: String,
      required: true
    }
  },
  data () {
    return {};
  },
  computed: {
    ...mapState('user', ['token']),
    path () {
      return `../../static/home/thumb${this.index}.png`;
    }
  },
  methods: {
    goToPage () {
      if (!this.url) return console.log('没配置链W');
      if (!this.token) {
        return uni.navigateTo({
          url: `/subpackage/login/login?isLogin=1`
        })
      }
      if (this.index === 2) {
        uni.switchTab({
          url: this.url
        });
      } else {
        uni.navigateTo({
          url: this.url
        });
      }
    }
  }
};
</script>

<style lang="scss">
.thumb-container {
  width: 150rpx;
  height: 150rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 10rpx;

  .thumb-pic {
    width: 100rpx;
    height: 100rpx;

    image {
      width: 100%;
      height: 100%;
      border-radius: 100%;
    }
  }

  .thumb-text {
    font-size: 28rpx;
    margin-top: 5rpx;
    text-shadow: 2rpx 2rpx 2rpx gray;
  }
}
</style>
